<template>
  <div class="custom-bread-crumb">
    <Breadcrumb :style="{fontSize: `${fontSize}px`}">
      <Breadcrumb-item v-for="item in list" :to="item.to" :key="`bread-crumb-${item.name}`">
        <Icon style="margin-right: 4px;" :type="item.icon || ''"/>
        {{showTilte(item)}}
      </Breadcrumb-item>
    </Breadcrumb>
  </div>
</template>

<script>
  import {showTitle} from "@/libs/util";
  import './custom-bread-crumb.less'

  export default {
    name: 'customBreadCrumb',
    components: {},
    props: {
      list: {
        type: Array,
        default: () => []
      },

      fontSize: {
        type: Number,
        default: 14
      },
      showIcon: {
        type: Boolean,
        default: false
      }
    },
    methods: {
      showTilte(item) {
        return showTitle(item, this)
      },
      isCustomIcon(iconName) {
        return iconName.indexOf('_') === 0
      },
      getCustomIconName(iconName) {
        return iconName.slice(1)
      }

    }
  }
</script>
